{% extends "base.html" %}

{% block title %}关于 - 晨光博客{% endblock %}

{% block content %}
<div class="about-container">
    <h1>关于晨光博客</h1>

    <div class="about-content">
        <section class="about-section">
            <h2>我们的故事</h2>
            <p>晨光博客创建于2023年，是一个专注于分享技术、生活和思考的个人博客平台。我们致力于提供高质量的内容，帮助读者获取有价值的信息和灵感。</p>
        </section>

        <section class="about-section">
            <h2>我们的使命</h2>
            <p>通过分享知识和经验，促进技术交流和个人成长。我们相信，知识的分享能让世界变得更美好。</p>
        </section>

        <section class="about-section">
            <h2>技术栈</h2>
            <ul class="tech-stack">
                <li>Flask - Python Web框架</li>
                <li>Markdown - 内容编辑</li>
                <li>SQLite - 数据库</li>
                <li>HTML5/CSS3 - 前端展示</li>
                <li>JavaScript - 交互功能</li>
            </ul>
        </section>

        <section class="about-section">
            <h2>联系我们</h2>
            <p>如有任何问题或建议，欢迎通过以下方式联系我们：</p>
            <div class="contact-methods">
                <a href="mailto:2649188733@qq.com" class="contact-link">
                    <i class="fas fa-envelope"></i> 2649188733@qq.com
                </a>
            </div>
        </section>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .about-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
    }

    .about-content {
        margin-top: 2rem;
    }

    .about-section {
        margin-bottom: 2.5rem;
    }

    .about-section h2 {
        color: var(--apple-blue);
        border-bottom: 2px solid var(--apple-light-gray);
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
    }

    .tech-stack {
        list-style-type: none;
        padding: 0;
    }

    .tech-stack li {
        padding: 0.5rem 0;
        border-bottom: 1px dashed #eee;
    }

    .contact-methods {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .contact-link {
        display: inline-flex;
        align-items: center;
        color: var(--apple-dark-gray);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .contact-link i {
        margin-right: 0.5rem;
        color: var(--apple-blue);
    }

    .contact-link:hover {
        color: var(--apple-blue);
    }

    /* 暗色主题样式 */
    .dark-theme .about-section h2 {
        color: var(--apple-light-blue);
        border-bottom-color: var(--apple-dark-gray);
    }

    .dark-theme .tech-stack li {
        border-bottom-color: var(--apple-dark-gray);
    }

    .dark-theme .contact-link {
        color: #e0e0e0;
    }
</style>
{% endblock %}